<template>
    <view class="page">
        <back :isBack="true" :title="'我的团队'"></back>
        <view class="fenduaqi_box">
            <u-subsection :list="list" :count="count" :isCount="true" :current="curNow"
                @change="sectionChange"></u-subsection>
        </view>

        <scroll-view scroll-y class="bot_box" v-if="stemList.length > 0" @scrolltolower="lower()">
            <view class="dange_box" v-for="(item, index) in stemList" :key="index">
                <view class="tx_box">
                    <image :src="item.avatar" mode="scaleToFill" />
                </view>
                <view class="name_box">{{ item.nickname }}</view>
            </view>
            <aLoadMore :status="loadStatus" mode="loading2" color="#808080" textColor="#808080" textSize="24rpx"
                padding="50rpx" :loadTitle="loadTitle"></aLoadMore>
        </scroll-view>
        <empoy v-else :kongtext="'暂无数据'"></empoy>
    </view>
</template>
<script>
import back from "@/components/goback/goback"
import empoy from "@/components/empoy/empoy"
export default {
    components: {
        back, empoy
    },
    data() {
        return {
            loadStatus: 'normal',//加载状态down,loading,normal
            loadTitle: {
                down: "上拉加载更多",
                loading: "正在加载",
                normal: "没有更多了",
            },
            page: 1,   // 第一页
            flag: true,  // 防抖开关 防止用户不停的下拉
            stemList: [],
            list: [
                {
                    name: '一级团队'
                },
                {
                    name: '二级团队'
                }
            ],
            curNow: 0,
            count: '',//人数
        }
    },
    onShow() {
        this.page = 1
        this.stemList = []
        this.getstem()
    },
    methods: {
        lower() {
            if (this.flag) {
                this.getstem();
            } else {
                this.loadStatus = 'normal'
            }

        },
        sectionChange(index) {
            this.curNow = index;
            this.page = 1
            this.stemList = []
            if (this.curNow == 0) {
                this.getstem()
            } else {
                this.getSeconed()
            }

        },
        getSeconed() {
            this.count = ''
            this.loadStatus = 'loading'
            let data = {
                page: this.page
            }
            this.$Request.post(this.$api.word.userTwo_team, data).then(res => {
                if (res.code == 200) {
                    this.loadStatus = 'down'
                    this.count = res.data.count
                    var stemList = res.data.teams;
                    this.page++;
                    this.stemList = this.stemList.concat(stemList);
                    if (stemList.length < 20) {
                        this.flag = false
                        this.loadStatus = 'normal'
                    } else {
                        this.flag = true
                    }
                }
            })
        },
        getstem() {
            this.count = ''
            this.loadStatus = 'loading'
            let data = {
                page: this.page
            }
            this.$Request.post(this.$api.user.userTeam, data).then(res => {
                if (res.code == 200) {
                    this.loadStatus = 'down'
                    this.count = res.data.count
                    var stemList = res.data.teams;
                    this.page++;
                    this.stemList = this.stemList.concat(stemList);
                    if (stemList.length < 20) {
                        this.flag = false
                        this.loadStatus = 'normal'
                    } else {
                        this.flag = true
                    }
                }
            })
        }
    }
}
</script>
<style lang="scss" scoped>
/deep/.u-subsection {
    background-color: rgba(229, 229, 229, 1) !important;

}

.page {
    width: 100vw;
    height: 100vh;
    background-color: rgba(245, 245, 245, 1);

    .fenduaqi_box {
        width: 704rpx;
        height: 80rpx;
        opacity: 1;
        border-radius: 10rpx;
        margin: 20rpx auto;

    }

    .bot_box {
        width: 704rpx;
        height: 1276rpx;
        border-radius: 28rpx;
        background: rgba(255, 255, 255, 1);
        margin: auto;
        box-sizing: border-box;
        padding: 0 32rpx;

        .dange_box {
            width: 136rpx;
            height: 100rpx;
            margin-top: 42rpx;
            margin-right: 24rpx;
            float: left;

            .tx_box {
                width: 92rpx;
                height: 92rpx;
                border-radius: 50%;
                margin: auto;
                margin-bottom: 10rpx;

                image {
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                }
            }

            .name_box {
                width: 100%;
                height: 34rpx;
                text-align: center;
                line-height: 34rpx;
                font-size: 24rpx;
                font-weight: 400;
                color: rgba(0, 0, 0, 1);
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }
    }

}
</style>